<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/lunbo.css">
		<script src="js/lunbo.js"></script>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
// 头像追加放大
$(function(){
	var x = 10;
	var y = 20;
	$("a.tooltip").mouseover(function(e){
			
		var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/><\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中						 
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show("fast");	  //设置x坐标和y坐标，并且显示
		}).mouseout(function(){
				
			$("#tooltip").remove();	 //移除 
		}).mousemove(function(e){
			$("#tooltip")
				.css({
					"top": (e.pageY+y) + "px",
					"left":  (e.pageX+x)  + "px"
				});
	});
});
//]]>
// 一键黑夜
$(function(){
            var flag = 0;
            $("#btn001").click(function(){
                if(flag == 0)
                {
                     $("body").css("background","black");
                     flag = 1;
                }
                else
                {
                    $("body").css("background","#fff");
                     flag = 0;
                }
              
            });
        });
</script>
		<style>
	
		  .myscroll { 
			  width: 300px; 
			  height: 280px; 
			  margin: 0 auto; 
			  border: 1px solid #ccc;
			  line-height: 26px; 
			  font-size: 12px; 
			  overflow: hidden;
			  
			}
	.myscroll li { 
		height: 26px;
		 margin-left: 20px;}
	.myscroll a { 
		color: #333; 
		text-decoration: none;}
	.myscroll a:hover {
		 color: #ED5565;
		  text-decoration: underline;}
		  .myscroll a::before{
			  content: '📁';
			  margin-right: 10px;
		  }
		  #tooltip{
			position:absolute;
			border:1px solid #edd4ba;
			/* background:#333; */
			padding:1px;
			display:none;
		  }
			/* color:#fff; */
			#btn001 {
				margin-left: 8px;
				background:#2daebf;
				border: none;
				color: #fff;
				border-radius: 10px;
				width: 80px;
				height: 25px;
				line-height: 25px;
				outline:0 none;
			}
			#goToTop {
      position: fixed;
      bottom: 20px;
      right: 10%;
   }
  #goToTop a {
     background: none repeat scroll 0 0 #336699;
     border: 1px solid #CCCCCC;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     color: #FF9966;
     font-size: 14px;
     padding: 5px;
     text-decoration: none;
     text-shadow: 0 1px 0 #999;
     -webkit-text-shadow: 0 1px 0 #999;            
     }
		</style>
	</head>
	<body>
		<div class="daohang">
			<!-- <div class="left"><a href="#">ZovY🧡💛💚YovZ</a></div> -->
			<div class="right">
				<ul class="daohang_ul">
					<li><a href="index.html">首页</a></li>
					<li><a href="./wz/wz00.html">设计要求</a></li>
					<li><a href="gunyvwo.html">关于我</a></li>
					<li><a href="xiangce.html">我的相册</a></li>
					<li><a href="shopin1.html">喜欢的视频</a></li>
					<li><a href="register.html">登录/注册</a></li>
					<button id="btn001">一键黑夜</button>
				</ul>
			
			</div>	
			
		</div>
		<div class="lunbo1">
			<div class="box">
				<div class="box-1">
					<ul>
						<li>
							<a href="index.html">
								<img src="images/1.png" alt="这里是第一场图片"></img>
								<!-- <h2>点击进入首页</h2> -->
							</a>
						</li>
						<li>
							<a href="gunyvwo.html">
								<img src="images/2.jpg" alt="这里是第二张图片"></img>
								<!-- <h2>点击进入关于我</h2> -->
							</a>

						</li>
						<li>
							<a href="xiangce.html">
								<img src="images/3.jpg" alt="这里是第三张图片"></img>
								<!-- <h2>点击进入我的相册</h2> -->
							</a>

						</li>
						<li>
							<a href="shopin1.html">
								<img src="images/4.jpg" alt="这里是第一场图片"></img>
								<!-- <h2>点击进入我的视频</h2> -->
							</a>
						</li>
						<li>
							<a href="denglu.html">
								<img src="images/5.jpg" alt="这里是第一场图片"></img>
								<!-- <h2>点击登录/注册</h2> -->
							</a>
						</li>
					</ul>
				</div>
				<div class="box-2">
					<ul>

					</ul>
				</div>
				<div class="box-3">
					<span class="prev">
						< </span> <span class="next"> >
					</span>
				</div>
			</div>
			<div class="box1">
				<div class="box1_1">
					<img src="images/mingpian.jpg" alt="" style="border-radius: 10px;">
				</div>
				<div class="box1_2" style="background-image:url(images/touxiang01.jpg);">
					
					<div class="touxiang">
						<br><br><br>
				
					<a href="images/touxiang001.jpg"  class="tooltip"><img src="images/touxiang01.jpg" ></a>
						
					</div>
					<br><br><br>
					<p  class="name">ZovY🧡💛💚YovZ</p>
					<!-- <p class="name1">曾捷宏</p> -->
					<!-- <p class="name1">学号：</p>
					<p class="name1">电话：</p> -->
				</div>
				<!--<div class="box1_3"></div>-->
			</div>
		</div>
		<div class="zhuti">
			<div class="zuobian">
				<div class="neirong">
					<div class="neirong1">
						<div class="neirong1_1">
							<!-- <span class="square"></span> -->
							<span class="main-title">文章</span>
							<span class="vertical-line"></span>
							<span class="sub-title">Article</span>
							<span class="view-more">
								<a href="#">查看更多</a>
							</span>
						</div>
						<div class="neirong1_2">
							<ul class="list clearfix">
								<li>
									<a href="#">最多评论</a>
								</li>
								<li>
									<a href="#">最热</a>
								</li>
								<li>
									<a href="#">推荐</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="kuang">
						<div class="kuang1">
							<div class="kuang1_left">
								<div class="text-wrapper">
									<h4 class="title"><a href="wz/wz1.html">Android Studio 优化</a></h4>
									<div class="tags">
										<div class="border-tag">
											<span> Adnroid </span>
										</div>
									</div>
									<p class="desc">
										安装好Android Studio之后需要根据自己的习惯进行一些设置，下载些插件、
										设置下软件的相关属性等等。刚好重装了下系统，
										针对这个Android Studio进行了相关的设置，......
										<a href="wz/wz1.html"> 查看更多
											<i class=""></i>
										</a>
									</p>
									<p class="operate_info">
										<span class="publish-time"><a href="#">2020-11-25</a></span>
										<span class="readings"> <a href="#">964 阅读</a> </span>
										<span class="comments"> <a href="#">0 评论 </a></span>
										<span class="likes"> <a href="#">37 赞</a> </span>
									</p>
								</div>
							</div>
							<div class="kuang1_right">
								<div class="img-wrapper">
									<img src="images/neirong1.png">
								</div>
							</div>
						</div>
					</div>

					<!-- 2 -->
					<div class="kuang">
						<div class="kuang1">
							<div class="kuang1_left">
								<div class="text-wrapper">
									<h4 class="title"><a href="wz/wz2.html">A汇编语言总结笔记</a></h4>
									<div class="tags">
										<div class="border-tag">
											<span> 微机原理 </span>
										</div>
									</div>
									<p class="desc">
										因为计算机中只能存储二进制数，所以一般都是通过二进制直接进行存储，但是为了方便阅读和程序员的编码简单化
										，就出现了八进制、十进制、十六进制，一般在汇编的学习过程中以二、十、十六进制为主。
										四种数据的表示形式符号是：B(二进制)、O(八进制)，D(十进制)，H(十六进制)......
										<a href="wz/wz2.html"> 查看更多
											<i class=""></i>
										</a>
									</p>
									<p class="operate_info">
										<span class="publish-time"><a href="#">2020-11-26</a></span>
										<span class="readings"> <a href="#">964 阅读</a> </span>
										<span class="comments"> <a href="#">0 评论 </a></span>
										<span class="likes"> <a href="#">50 赞</a> </span>
									</p>
								</div>
							</div>
							<div class="kuang1_right">
								<div class="img-wrapper">
									<img src="images/wz2.jpg">
								</div>
							</div>
						</div>
					</div>
					<!-- 3 -->
					<div class="kuang">
						<div class="kuang1">
							<div class="kuang1_left">
								<div class="text-wrapper">
									<h4 class="title"><a href="wz/wz3.html">HTML简单入门</a></h4>
									<div class="tags">
										<div class="border-tag">
											<span> HTML </span>
										</div>
									</div>
									<p class="desc">
										1.HTML指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言、
										2.不是编程语言，而是一种标记语言
										3.标记语言是一套标记标签HTML......
										<a href="wz/wz3.html"> 查看更多
											<i class=""></i>
										</a>
									</p>
									<p class="operate_info">
										<span class="publish-time"><a href="#">2020-11-27</a></span>
										<span class="readings"> <a href="#">1000 阅读</a> </span>
										<span class="comments"> <a href="#">0 评论 </a></span>
										<span class="likes"> <a href="#">37 赞</a> </span>
									</p>
								</div>
							</div>
							<div class="kuang1_right">
								<div class="img-wrapper">
									<img src="images/wz4.jpg">
								</div>
							</div>
						</div>
					</div>
					<!-- 4 -->
					<div class="kuang">
						<div class="kuang1">
							<div class="kuang1_left">
								<div class="text-wrapper">
									<h4 class="title"><a href="wz/wz5.html">计算机网络学习总结超赞</a></h4>
									<div class="tags">
										<div class="border-tag">
											<span> 网络学习 </span>
										</div>
									</div>
									<p class="desc">
										互联网服务提供商 ISP 可以从互联网管理机构获得许多 IP 地址，同时拥有通信线路以及路由器等联网设备，个人或机构向 ISP 缴纳一定的费用就可以接入互联网。
										目前的互联网是一种多层次 ISP 结构，ISP 根据覆盖面积的大小分为主干 ISP、地区 ISP 和本地 ISP。......
										<a href="wz/wz5.html"> 查看更多
											<i class=""></i>
										</a>
									</p>
									<p class="operate_info">
										<span class="publish-time"><a href="#">2020-11-25</a></span>
										<span class="readings"> <a href="#">964 阅读</a> </span>
										<span class="comments"> <a href="#">0 评论 </a></span>
										<span class="likes"> <a href="#">37 赞</a> </span>
									</p>
								</div>
							</div>
							<div class="kuang1_right">
								<div class="img-wrapper">
									<img src="images/wz5.jpg">
								</div>
							</div>
						</div>
					</div>
					<!-- 5 -->
					<div class="kuang">
						<div class="kuang1">
							<div class="kuang1_left">
								<div class="text-wrapper">
									<h4 class="title"><a href="wz/wz4.html">HTML学习笔记</a></h4>
									<div class="tags">
										<div class="border-tag">
											<span> HTML学习 </span>
										</div>
									</div>
									<p class="desc">
										超文本指超链接，可从一个页面跳转到另一个页面，使用标签的形式来标识网页中不同组成部分
										网页代码必须写在标签中，标签为&lt;标签&gt;式样，开始和结束时都要加标签......
										<a href="wz/wz4.html"> 查看更多
											<i class=""></i>
										</a>
									</p>
									<p class="operate_info">
										<span class="publish-time"><a href="#">2020-11-25</a></span>
										<span class="readings"> <a href="#">964 阅读</a> </span>
										<span class="comments"> <a href="#">0 评论 </a></span>
										<span class="likes"> <a href="#">37 赞</a> </span>
									</p>
								</div>
							</div>
							<div class="kuang1_right">
								<div class="img-wrapper">
									<img src="images/wz4.jpg">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="celan"> 
				<div class="celan1">
					<h2>友情链接</h2> 
					<div class="celan1_1">
						<div class="myscroll">
<ul>
<li><a href="#68.html">用FlexSlider制作支付宝2013版幻灯片</a></li>
<li><a href="#67.html">扁平化UI/Flat UI Kit(PSD)</a></li>
<li><a href="#66.html">童趣卡通圣诞老人矢量素材(EPS)</a></li>
<li><a href="#65.html">63个线性图标素材(PSD)</a></li>
<li><a href="#64.html">15个音乐类图标素材(AI)</a></li>
<li><a href="#63.html">jQuery侧边导航插件SidebarJS</a></li>
<li><a href="#62.html">jQuery计时器插件TimeCircles</a></li>
<li><a href="#61.html">jQuery仿Google Play幻灯片效果插件</a></li>

<li><a href="#59.html">用FlexSlider制作《枪神纪》幻灯片效</a></li>

<li><a href="#67.html">扁平化UI/Flat UI Kit(PSD)</a></li>
<li><a href="#66.html">童趣卡通圣诞老人矢量素材(EPS)</a></li>
<li><a href="#65.html">63个线性图标素材(PSD)</a></li>

</ul>
</div>
</div>
			</div>
			
				<div class="weixin">
					<h2>我的微信</h2>
					<div class="weixin1">
						<img src="images/weixin.jpg">
					</div>
				</div>
			</div>
		</div>

			<div class="dibu1" style="text-align: center;background: #000000;color: #fff;">
		
				<p>
					&nbsp;
			
				</p>
				<p>
					🧡💛💚——个人博客展示<br />
					2020-2021 ©哥哥DM.
					粤ICP备20067670号
				<br />
					Copyright ZovY.YovZ. All Right Reserved V1.0
					<br>
					<p>版权信息：19级软件B班&nbsp;&nbsp;曾捷宏&nbsp;&nbsp;1906200218&nbsp;&nbsp;于2021.01.08制作完成</p>
					 <p>联系方式：17665766006(微信同号)</p>
				</p>
			
			
			</div>
			<div id="goToTop"><a href="#">点我回到页面顶部</a></div>
	</body>
	<script src="./js/jquery-2.1.4.min.js"></script>
	<script src="./js/scroll.js"></script>
		<script type="text/javascript">
		$(function(){
			$('.myscroll').myScroll({
				speed: 40, //数值越大，速度越慢
				rowHeight: 26 //li的高度
			});
		});
		</script>

	
		<script type="text/javascript">
    // $(document).ready(function(){
    //     $('#goToTop a').click(function(){
    //         $('html,body').animate({scrollTop:0},'slow');// slow=600ms
    //     });
	// });
	// 向上滚动到顶部
	$(function(){
     $('#goToTop').hide();        //隐藏go to top按钮
	// $(window).scroll,滚动条事件
	// scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
     $(window).scroll(function(){
          // console.log($(this).scrollTop());
		  // 当window的scrolltop距离大于1时，go to 
		  // 获取到滚动后距离顶部的高度,100
          if($(this).scrollTop() > 100){
              $('#goToTop').fadeIn();// 使用淡入效果来显示一个隐藏的goToTop元素
          }else{
               $('#goToTop').fadeOut();// 使用淡出效果来隐藏一个goToTop元素
           }
       });
	   // 点击goToTop元素的函数执行自定义动画方法，滚回顶部高度为0,0.350s
       $('#goToTop a').click(function(){
           $('html ,body').animate({scrollTop: 0}, 350);
          return false;
      });
   });
</script>
	</script>
	 <!--下雪 喜欢的可以用哦-->
	 <script type="text/javascript">
		/* 控制下雪 */
		function snowFall(snow) {
			/* 可配置属性 */
			snow = snow || {};
			this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
			this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
			this.fallSpeed = snow.fallSpeed || 3;   /* 坠落速度 */
		}
		/* 兼容写法 */
		requestAnimationFrame = window.requestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			window.webkitRequestAnimationFrame ||
			window.msRequestAnimationFrame ||
			window.oRequestAnimationFrame ||
			function(callback) { setTimeout(callback, 1000 / 60); };
	
		cancelAnimationFrame = window.cancelAnimationFrame ||
			window.mozCancelAnimationFrame ||
			window.webkitCancelAnimationFrame ||
			window.msCancelAnimationFrame ||
			window.oCancelAnimationFrame;
		/* 开始下雪 */
		snowFall.prototype.start = function(){
			/* 创建画布 */
			snowCanvas.apply(this);
			/* 创建雪花形状 */
			createFlakes.apply(this);
			/* 画雪 */
			drawSnow.apply(this)
		}
		/* 创建画布 */
		function snowCanvas() {
			/* 添加Dom结点 */
			var snowcanvas = document.createElement("canvas");
			snowcanvas.id = "snowfall";
			snowcanvas.width = window.innerWidth-20;
			snowcanvas.height = document.body.clientHeight;
			snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
			document.getElementsByTagName("body")[0].appendChild(snowcanvas);
			this.canvas = snowcanvas;
			this.ctx = snowcanvas.getContext("2d");
			/* 窗口大小改变的处理 */
			window.onresize = function() {
				snowcanvas.width = window.innerWidth;
				/* snowcanvas.height = window.innerHeight */
			}
		}
		/* 雪运动对象 */
		function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
			this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
			this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
			this.size = Math.random() * flakeSize + 2;          /* 形状 */
			this.maxSize = flakeSize;                           /* 最大形状 */
			this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
			this.fallSpeed = fallSpeed;                         /* 坠落速度 */
			this.velY = this.speed;                             /* Y方向速度 */
			this.velX = 0;                                      /* X方向速度 */
			this.stepSize = Math.random() / 30;                 /* 步长 */
			this.step = 0                                       /* 步数 */
		}
		flakeMove.prototype.update = function() {
			var x = this.x,
				y = this.y;
			/* 左右摆动(余弦) */
			this.velX *= 0.98;
			if (this.velY <= this.speed) {
				this.velY = this.speed
			}
			this.velX += Math.cos(this.step += .05) * this.stepSize;
	
			this.y += this.velY;
			this.x += this.velX;
			/* 飞出边界的处理 */
			if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
				this.reset(canvas.width, canvas.height)
			}
		};
		/* 飞出边界-放置最顶端继续坠落 */
		flakeMove.prototype.reset = function(width, height) {
			this.x = Math.floor(Math.random() * width);
			this.y = 0;
			this.size = Math.random() * this.maxSize + 2;
			this.speed = Math.random() * 1 + this.fallSpeed;
			this.velY = this.speed;
			this.velX = 0;
		};
		// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
		flakeMove.prototype.render = function(ctx) {
			var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
			snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
			snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
			snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
			ctx.save();
			ctx.fillStyle = snowFlake;
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
			ctx.fill();
			ctx.restore();
		};
		/* 创建雪花-定义形状 */
		function createFlakes() {
			var maxFlake = this.maxFlake,
				flakes = this.flakes = [],
				canvas = this.canvas;
			for (var i = 0; i < maxFlake; i++) {
				flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
			}
		}
		/* 画雪 */
		function drawSnow() {
			var maxFlake = this.maxFlake,
				flakes = this.flakes;
			ctx = this.ctx, canvas = this.canvas, that = this;
			/* 清空雪花 */
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			for (var e = 0; e < maxFlake; e++) {
				flakes[e].update();
				flakes[e].render(ctx);
			}
			/*  一帧一帧的画 */
			this.loop = requestAnimationFrame(function() {
				drawSnow.apply(that);
			});
		}
		/* 调用及控制方法 */
		var snow = new snowFall({maxFlake:60});
		snow.start();
	</script>
	  <!--页面背景特效--> 
	  <script src="./js/background.js" count="200" zindex="-2" opacity="0.8" color="47,135,193" type="text/javascript"></script>
</html>
